<template>
  <div class="employee-index">
    <div class="head">
        <div class="search">
            <div class="name item">
                <label class="name">员工姓名：</label>
                <el-input @clear="getEmployee" :clearable="true" v-model="employeeName" placeholder="请输入员工姓名"></el-input>
            </div>
            <el-button @click="getEmployee">查询</el-button>
        </div>
        <div class="add">
            <el-button @click="$router.push('/employee/add')" type="primary">+ 添加员工</el-button>
        </div>
    </div>
    <div class="main">
        <el-table :data="employeeList">
            <el-table-column prop="name" align="center" label="员工姓名"></el-table-column>
            <el-table-column prop="username" align="center" label="账号"></el-table-column>
            <el-table-column prop="phone" align="center" label="手机号"></el-table-column>
            <el-table-column align="center" label="账号状态">
                <template slot-scope="scope">
                    <div class="tableColumn-status" :class="{ active: scope.row.status === 1 }">
                        <span>{{ scope.row.status === 1 ? '启用' : '禁用' }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" align="center" label="最后操作时间"></el-table-column>
            <el-table-column class-name="operate" align="center" label="操作">
                <template slot-scope="scope">
                    <button
                     class="btn"
                     :class="{ disabled: scope.row.username === 'admin' }"
                     :disabled="scope.row.username === 'admin'"
                     @click="$router.push(`/employee/add?id=${scope.row.id}`)">修改</button>
                    <button
                     v-if="scope.row.status === 0" class="btn"
                     :class="{ disabled: scope.row.username === 'admin' }"
                     :disabled="scope.row.username === 'admin'"
                     @click="changeStatus(scope.row.status, scope.row.id)">启用</button>
                    <button
                     v-else
                     class="btn red"
                     :class="{ disabled: scope.row.username === 'admin' }"
                     :disabled="scope.row.username === 'admin'"
                     @click="changeStatus(scope.row.status, scope.row.id)">禁用</button>
                </template>
            </el-table-column>
        </el-table>
        <div class="paginate">
            <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[10, 20, 30, 40]"
            :total="pageTotal"
            :page-size.sync="pageSize"
            :current-page.sync="page"
            @size-change="getSetmeal()"
            @current-change="getSetmeal()"
            ></el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import { getEmployee, changeStatus } from '@/api/employee'
export default {
  name: 'EmployeeIndex',
  data () {
    return {
      employeeName: '',
      pageTotal: 0,
      pageSize: 10,
      page: 1,
      employeeList: []
    }
  },
  created () {
    this.getEmployee()
  },
  methods: {
    async getEmployee () {
      const res = await getEmployee({
        name: this.employeeName,
        page: this.page,
        pageSize: this.pageSize
      })
      console.log(res)

      if (res.code === 1) {
        this.employeeList = res.data.records
        this.pageTotal = res.data.total
      }
    },
    changeStatus (status, id) {
      this.$confirm('确认调整该账号的状态？', '提示', {}).then(async () => {
        const res = await changeStatus(status ? 0 : 1, id)
        if (res.code === 1) {
          this.getEmployee()
          this.$message.success('操作成功')
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => {})
    }
  }
}
</script>

<style lang="less" scoped>
.employee-index {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;

    .head {
        display: flex;
        justify-content: space-between;
        font-size: 14px;

        .search {
            display: flex;
            align-items: center;
            gap: 15px;

            .item {
                display: flex;
                align-items: center;

                .name {
                    flex-shrink: 0;
                    margin-right: 5px;
                }

                .el-input {
                    width: 240px;
                }
            }

            .el-button {
                color: #fff;
                background-color: #333;
                border-color: #333;
            }

            .el-button:hover {
                background-color: #999;
                border-color: #999;
            }

            .el-button:active {
                background-color: #333;
                border-color: #333;
            }
        }
    }

    .main {
        margin-top: 20px;

        ::v-deep .el-table .operate button.disabled {
            color: #bac0cd;
        }
    }
}
</style>
